<!DOCTYPE html>
<html>
<head>
  <title>Physics Diagram</title>
  <style>
    canvas {
      border: 1px solid #ccc;
    }
  </style>
</head>
<body>
  <canvas id="physicsCanvas" width="600" height="400"></canvas>
  <script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // Clear canvas with a white background
    ctx.fillStyle = 'white';
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    // Set drawing styles
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.lineWidth = 2;
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';

    // Define key coordinates
    const y_base = 200;
    const x_M = 150;
    const x_Q = 450;

    // 1. Draw point M (e.g., the Sun)
    const M_radius = 6;
    ctx.beginPath();
    ctx.arc(x_M, y_base, M_radius, 0, 2 * Math.PI);
    ctx.fill();
    ctx.font = "italic 30px 'Times New Roman'";
    ctx.fillText('M', x_M, y_base + 35);

    // 2. Draw point Q's label
    ctx.fillText('Q', x_Q, y_base + 35);

    // 3. Draw the line segment MQ
    ctx.beginPath();
    ctx.moveTo(x_M, y_base);
    ctx.lineTo(x_Q, y_base);
    ctx.stroke();

    // 4. Draw the distance label r₀
    const r_x = (x_M + x_Q) / 2;
    const r_y = y_base + 28;
    // Draw 'r'
    ctx.font = "italic 24px 'Times New Roman'";
    ctx.fillText('r', r_x - 5, r_y);
    // Draw subscript '0'
    ctx.font = "italic 16px 'Times New Roman'";
    ctx.fillText('0', r_x + 8, r_y + 5);

    // 5. Draw the velocity vector v₀
    const vectorLength = 130;
    const angle_deg = 135; // The vector angle is 180 - 45 = 135 degrees from the positive x-axis
    const angle_rad = angle_deg * Math.PI / 180;

    const x_vec_end = x_Q + vectorLength * Math.cos(angle_rad);
    const y_vec_end = y_base - vectorLength * Math.sin(angle_rad); // Subtract because canvas y-axis is inverted

    ctx.beginPath();
    ctx.moveTo(x_Q, y_base);
    ctx.lineTo(x_vec_end, y_vec_end);
    ctx.stroke();

    // Draw the arrowhead
    const arrowHeadLength = 20;
    const arrowAngle = Math.PI / 9; // Angle of the arrowhead sides
    const lineAngle = Math.atan2(y_vec_end - y_base, x_vec_end - x_Q);

    ctx.beginPath();
    ctx.moveTo(x_vec_end, y_vec_end);
    ctx.lineTo(x_vec_end - arrowHeadLength * Math.cos(lineAngle - arrowAngle), y_vec_end - arrowHeadLength * Math.sin(lineAngle - arrowAngle));
    ctx.moveTo(x_vec_end, y_vec_end);
    ctx.lineTo(x_vec_end - arrowHeadLength * Math.cos(lineAngle + arrowAngle), y_vec_end - arrowHeadLength * Math.sin(lineAngle + arrowAngle));
    ctx.stroke();

    // 6. Draw the velocity label v₀
    const v_x = x_vec_end + 10;
    const v_y = y_vec_end - 30;
    // Draw 'v'
    ctx.font = "italic 24px 'Times New Roman'";
    ctx.fillText('v', v_x, v_y);
    // Draw subscript '0'
    ctx.font = "italic 16px 'Times New Roman'";
    ctx.fillText('0', v_x + 10, v_y + 5);

    // 7. Draw the angle arc
    const arcRadius = 50;
    const startAngleRad = 180 * Math.PI / 180; // The line MQ is at 180 degrees
    const endAngleRad = 135 * Math.PI / 180; // The vector is at 135 degrees
    ctx.beginPath();
    // Draw clockwise from 180 to 135 to create the 45-degree arc
    ctx.arc(x_Q, y_base, arcRadius, startAngleRad, endAngleRad, false);
    ctx.stroke();

    // 8. Draw the angle label "45°"
    ctx.font = "24px 'Times New Roman'";
    const midAngleRad = (180 + 135) / 2 * (Math.PI / 180);
    const labelRadius = arcRadius - 18;
    const labelX = x_Q + labelRadius * Math.cos(midAngleRad);
    const labelY = y_base - labelRadius * Math.sin(midAngleRad);
    ctx.fillText('45°', labelX, labelY);
  </script>
</body>
</html>